<template>
  <view class="profile-container">
    <!-- 导航栏 -->
    <view class="nav-header">
      <view class="nav-back" @click="goBack">
        <text class="back-icon">‹</text>
      </view>
      <view class="nav-title">个人信息</view>
      <view class="nav-placeholder"></view>
    </view>

    <!-- 主要内容 -->
    <scroll-view class="content-wrapper" scroll-y="true">
      <!-- 基础信息表单 -->
      <view class="form-container">
        <view class="form-title">
          <text class="title-text">基础信息</text>
        </view>

        <!-- 姓名 -->
        <view class="form-item">
          <view class="item-label">
            <text class="label-text">姓名</text>
            <text class="required">*</text>
          </view>
          <input
            class="item-input"
            v-model="userInfo.realName"
            placeholder="请输入真实姓名"
            maxlength="20"
            @input="clearError('realName')"
          />
          <text class="error-text" v-if="errors.realName">{{
            errors.realName
          }}</text>
        </view>

        <!-- 手机号 -->
        <view class="form-item">
          <view class="item-label">
            <text class="label-text">手机号</text>
            <text class="required">*</text>
          </view>
          <input
            class="item-input"
            v-model="userInfo.phone"
            placeholder="请输入手机号码"
            maxlength="11"
            type="number"
            @input="clearError('phone')"
          />
          <text class="error-text" v-if="errors.phone">{{ errors.phone }}</text>
        </view>

        <!-- 身份证号 -->
        <view class="form-item">
          <view class="item-label">
            <text class="label-text">身份证号</text>
            <text class="required">*</text>
          </view>
          <input
            class="item-input"
            v-model="userInfo.idCard"
            placeholder="请输入18位身份证号码"
            maxlength="18"
            @input="clearError('idCard')"
          />
          <text class="error-text" v-if="errors.idCard">{{
            errors.idCard
          }}</text>
        </view>

        <!-- 地址 -->
        <view class="form-item">
          <view class="item-label">
            <text class="label-text">联系地址</text>
          </view>
          <textarea
            class="item-textarea"
            v-model="userInfo.address"
            placeholder="请输入联系地址（选填）"
            maxlength="200"
          ></textarea>
        </view>
      </view>

      <!-- 保存按钮 -->
      <view class="action-section">
        <button
          class="save-btn"
          :class="{ disabled: !canSave }"
          @click="saveProfile"
          :disabled="!canSave"
        >
          保存信息
        </button>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import request from "@/api/request.js";

// 响应式数据
const userInfo = ref({
  realName: "",
  phone: "",
  idCard: "",
  address: "",
});

// 错误信息
const errors = ref({});

// 计算属性
const canSave = computed(() => {
  return (
    userInfo.value.realName &&
    userInfo.value.phone &&
    userInfo.value.idCard &&
    Object.keys(errors.value).length === 0
  );
});

// 页面加载时获取用户信息
onMounted(() => {
  loadUserInfo();
});

// 加载用户信息
const loadUserInfo = () => {
  const savedUserInfo = uni.getStorageSync("userInfo");
  if (savedUserInfo) {
    userInfo.value = { ...userInfo.value, ...savedUserInfo };
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 清除错误信息
const clearError = (field) => {
  if (errors.value[field]) {
    delete errors.value[field];
  }
};

// 表单验证
const validateForm = () => {
  const newErrors = {};

  if (!userInfo.value.realName.trim()) {
    newErrors.realName = "请输入真实姓名";
  } else if (!/^[\u4e00-\u9fa5]{2,20}$/.test(userInfo.value.realName)) {
    newErrors.realName = "请输入正确的中文姓名";
  }

  if (!userInfo.value.phone.trim()) {
    newErrors.phone = "请输入手机号码";
  } else if (!/^1[3-9]\d{9}$/.test(userInfo.value.phone)) {
    newErrors.phone = "请输入正确的手机号码";
  }

  if (!userInfo.value.idCard.trim()) {
    newErrors.idCard = "请输入身份证号码";
  } else if (
    !/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
      userInfo.value.idCard
    )
  ) {
    newErrors.idCard = "请输入正确的身份证号码";
  }
  errors.value = newErrors;
  return Object.keys(newErrors).length === 0;
};

// 保存个人信息
const saveProfile = async () => {
  if (!validateForm()) {
    return;
  }
  uni.showLoading({ title: "保存中..." });
  const response = await request.post("/api/auth/setProfile", userInfo.value);
  if (response.code == 200) {
    uni.hideLoading();
    uni.setStorageSync("userInfo", response.data);
    uni.showToast({
      title: "认证成功",
      icon: "success",
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
};
</script>

<style lang="scss" scoped>
.profile-container {
  min-height: 100vh;
  background: #f8f9fa;
  width: 100%;
  overflow-x: hidden;
}

// 导航栏
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 32rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #e5e5e5;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  box-sizing: border-box;
}

.nav-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 60rpx;
  cursor: pointer;
  flex-shrink: 0;
}

.back-icon {
  font-size: 36rpx;
  color: #333333;
  font-weight: bold;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  flex: 1;
  text-align: center;
}

.nav-placeholder {
  width: 60rpx;
  flex-shrink: 0;
}

// 内容区域
.content-wrapper {
  height: calc(100vh - 88rpx);
  padding: 20rpx;
  width: 100%;
  box-sizing: border-box;
}

// 表单容器
.form-container {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  width: 100%;
  box-sizing: border-box;
}

.form-title {
  margin-bottom: 32rpx;

  .title-text {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
  }
}

.form-item {
  margin-bottom: 32rpx;
  width: 100%;

  &:last-child {
    margin-bottom: 0;
  }

  .item-label {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    .label-text {
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
    }

    .required {
      color: #ff4757;
      margin-left: 8rpx;
    }
  }

  .item-input {
    width: 100%;
    height: 88rpx;
    padding: 0 24rpx;
    border: 2rpx solid #e5e5e5;
    border-radius: 12rpx;
    font-size: 28rpx;
    background: #ffffff;
    transition: all 0.3s ease;
    box-sizing: border-box;

    &:focus {
      border-color: #007aff;
      background: #f8f9ff;
    }
  }

  .item-textarea {
    width: 100%;
    min-height: 120rpx;
    padding: 20rpx 24rpx;
    border: 2rpx solid #e5e5e5;
    border-radius: 12rpx;
    font-size: 28rpx;
    background: #ffffff;
    resize: none;
    transition: all 0.3s ease;
    box-sizing: border-box;

    &:focus {
      border-color: #007aff;
      background: #f8f9ff;
    }
  }

  .error-text {
    display: block;
    font-size: 24rpx;
    color: #ff4757;
    margin-top: 8rpx;
    word-wrap: break-word;
  }
}

// 操作区域
.action-section {
  padding: 20rpx 0;
  width: 100%;
  box-sizing: border-box;
}

.save-btn {
  width: 100%;
  height: 88rpx;
  background: #007aff;
  color: #ffffff;
  border: none;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  box-sizing: border-box;

  &.disabled {
    background: #cccccc;
    color: #999999;
  }

  &:not(.disabled):active {
    background: #0056cc;
    transform: translateY(2rpx);
  }
}

// 响应式设计
@media (max-width: 750rpx) {
  .form-container {
    padding: 24rpx;
    margin: 0 0 20rpx 0;
  }

  .content-wrapper {
    padding: 16rpx;
  }

  .nav-header {
    padding: 0 24rpx;
  }

  .form-title .title-text {
    font-size: 28rpx;
  }

  .form-item {
    .item-input,
    .item-textarea {
      padding: 16rpx 20rpx;
    }
  }
}

// 确保所有元素不超出容器宽度
* {
  box-sizing: border-box;
  max-width: 100%;
}
</style>
